<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        #lbimg li img{
            width: 400px;
            float:left;
            position: absolute;
        }
        #left{
            width: 403px;
            height: 592px;
            overflow: hidden;
        }
        #right{
            width: 634px;
            height: 592px;
            position: absolute;
            top: 0px;
            left: 404px;
        }
        #fom{
            margin-left: 155px;
            margin-top: 10px;
        }
        .classInfo,#select{
            font-size: 15px;
            margin-left: 20px;
            color: #957592;
            font-family: 楷体;
        }
        .classInfo input,#select{
            margin-top: 25px;
            border-radius: 5px;
            width: 159px;
            height: 25px;
        }
        #btn1,#btn2{
            font-size: 15px;
            margin-left: 20px;
            color: #FF5722;
            font-family: 楷体;
            width: 80px;
            border: none;
            background-color: #03A9F4;
        }
    </style>
</head>
<body>
    <div id="root">
        <!--左边做一个三张图片的轮播-->
        <div id="left">
            <div id="lbimg">
                <ul id="imgul">
                    <li><img src="image/lbt1.jpg" alt=""></li>
                    <li><img src="image/lbt2.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <div id="right">
            <form action="" id="fom">
                <div class="classInfo">
                    <label for="UserName">姓名：</label>
                    <input type="text" name="UserName" id="name"/>
                </div>
                <div class="classInfo">
                    <label for="UserPwd">密码：</label>
                    <input type="password" name="UserPwd"/>
                </div>
                <div class="classInfo">
                    <label for="UserAge">年龄：</label>
                    <input type="number" name="UserAge">
                </div>
                <div class="classInfo">
                    <label for="UserSex">性别：</label>
                    男<input type="radio" name="UserSex" value="男"/>
                    女<input type="radio" name="UserSex" value="女"/>
                </div>
                <div class="classInfo">
                    <label for="UserAdress">地址：</label>
                    <select name="UserAdress" id="select">
                        <option value="选择地区">请选择</option>
                        <option value="湖南省">湖南省</option>
                        <option value="湖北省">湖北省</option>
                        <option value="广东省">广东省</option>
                        <option value="山西省">山西省</option>
                        <option value="江西省">江西省</option>
                        <option value="东北省">东北省</option>
                        <option value="其他">其他</option>
                    </select>
                </div>
                <div class="classInfo">
                    <input type="button" value="确  定" id="btn1" onclick="querenClick()">
                    <input type="reset" value="重  写" id="btn2">
                </div>
            </form>
        </div>
    </div>
        <script>
        /*根据id获取他下边的*/
        function id(a){
            return document.getElementById(a);
        };
        //定义一个对象
        var g ={index:0};
        //获得小编的所有li
        var Imgs=id("imgul").getElementsByTagName("li");
        //转成一个数组
        Imgs=Array.from(Imgs);
        //循环
        function lunboa(g) {
            g.index++;
            Imgs.forEach((item,i)=>{
                if(g.index%2===i){
                    item.style.display="none";
                }else{
                    item.style.display="block";
                }
            });
        };
        function run(){
            g.timmer=setInterval(lunboa, 2000, g);
        };
        run();
        //页面跳转的方法
        function jumurl() {
            window.location.href="Login.html";
        }
        //确认注册信息的点击方法
        function querenClick() {
            var names=document.forms[0].UserName.value;
            var ages=document.forms[0].UserAge.value;
            var sexs=document.forms[0].UserSex.value;
            var pwds=document.forms[0].UserPwd.value;
            var adresss=document.forms[0].UserAdress.value;
            if(names==""||ages==""||sexs==""||pwds==""||adresss==""){
                alert("输入值不能为空！")
            }else{
                var pepleInfo={
                    name:names,
                    age:ages,
                    sex:sexs,
                    pwd:pwds,
                    adress:adresss
                };
            }
            pepleInfo = JSON.stringify(pepleInfo);
            localStorage.setItem(document.forms[0].UserName.value,pepleInfo);
            alert("注册成功！页面将在5秒以后跳转至登录页面");
            setTimeout(jumurl,5000);
        }
    </script>
</body>
</html>